/**
 * @description 顶部tabBar
 */
import React from 'react';
import classnames from "classnames";
import style from "./styles/App.less";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    return (
      <div className={classnames("x-tabBarTop", {
        [this.props.className]: this.props.className
      })}>
        <div className="x-tabBarTop-wrapper">
          {
            this.props.tabs.map((tab, index) => {
              return (
                <div key={index} onClick={() => {
                  if (this.props.activeIndex != index) {
                    location.replace(tab.url)
                  }
                }} className={classnames("x-tabBarTop-item", {
                  "x-tabBarTop-item-active": this.props.activeIndex == index
                })}><span>{tab.name}</span></div>
              )
            })
          }
        </div>
        {
          !!this.props.widthShadow && <div className="x-tabBarTop-shadow"></div>
        }
      </div>
    );
  }
}

App.defaultProps = {
  tabs: [
    {
      name: "Tab1",
      url: ""
    },
    {
      name: "Tab2",
      url: ""
    }
  ],
  activeIndex: 0,
  widthShadow: true
};

export default App;
